<template>
    <div class="dialog">
      <el-dialog
        :title="'供应商'+titleText"
        :visible.sync="showDialog"
        width="60%"
        top="0"
        :close-on-click-modal="false"
        @close="cancel"
      >
        <el-form
          ref="ruleForm"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item label="供应商名称：" class="w50p" prop="supplierName">
            <el-input
              v-model="formData.supplierName"
              placeholder="请输入供应商名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="负责人" class="w50p" prop="charge">
            <el-input
              v-model="formData.charge"
              placeholder="请输入负责人名称"
              clearable
            />
          </el-form-item>
          <el-form-item label="负责人电话" class="w50p" prop="contactNumber">
            <el-input
              v-model="formData.contactNumber"
              placeholder="请输入负责人电话"
              clearable
            />
          </el-form-item>
          <el-form-item label="统一社会信用代码：" class="w50p" prop="creditCode">
            <el-input
              v-model="formData.creditCode"
              placeholder="请输入纳税人识别号"
              clearable
            />
          </el-form-item>
          <el-form-item label="银行账号：" class="w50p" prop="bankAccount">
            <el-input
              v-model="formData.bankAccount"
              placeholder="请输入银行账号"
              clearable
            />
          </el-form-item>
          <el-form-item label="开户行：" class="w50p" prop="openingBank">
            <el-input
              v-model="formData.openingBank"
              placeholder="请输入开户行"
              clearable
            />
          </el-form-item>
          <el-form-item label="地址:" class="w100p" prop="address">
          <el-cascader
            v-model="address"
            size="large"
            :options="options"
            clearable
            @change="handleChange"
          />
          <el-input
            v-model="formData.detailedAddress"
            placeholder="请输入详细地址"
            clearable
          />
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
          <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import sparePartsSupplierApi from "@/api/spare-part-manage/spare-part-supplier";
  import { regionData, CodeToText, TextToCode } from "element-china-area-data";
  
  export default {
    name: '',
    components: {},
    props: {
      // 弹框名称
      titleText: {
        type: String,
        default: ""
      },
      nowChanceStau: {
        type: String,
        default: ""
      },
      show: {
        type: Boolean,
        default: false
      },
      editObject: {
        type: [Object],
        default: () => {
          return {}
        }
      },
      userList: {
        type: [Array],
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        formData: {},
        rules: {
          supplierName: [
          {
            required: true,
            message: "请输入供应商名称",
            trigger: "blur"
          },
          {
            pattern: /[a-z]|[A-Z]|[\u4e00-\u9fa5]/g,
            message: "请输入中/英文",
            trigger: "blur"
          }
          ],
          charge: [
            {
              required: true,
              message: "请输入负责人名称",
              trigger: "blur"
            },
            {
              pattern: /[a-z]|[A-Z]|[\u4e00-\u9fa5]/g,
              message: "请输入中/英文",
              trigger: "blur"
            }
          ],
          contactNumber: [
            {
              required: true,
              message: "请输入手机号码",
              trigger: "blur"
            },
            {
              pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
              message: "请输入合法手机号/电话号",
              trigger: "blur"
            }
          ],
          supplyProducts: [
            {
              required: true,
              message: "请输入主要供应产品",
              trigger: "blur"
            }
          ],
          // address: [
          //   {
          //     required: true,
          //     message: "请输入主要地址",
          //     trigger: "blur"
          //   }
          // ]
        },
        // 仓库
        storeHouseList: [],
        showDialog: this.show,
        rightTableData: [],
        // 备件
        sparePartArr: [],
        //省市区地址数组
        address: [],
        options: regionData,
      };
    },
  
    watch: {
      show(v) {
        this.showDialog = v;
      },
      nowChanceStau(v) {
        this.rightTableData = []
        if (v === 'add') {
          this.formData = {}
        }
        if (v === 'edit') {
          this.formData = this.editObject
          if (this.editObject.address) {
                let dizhi = this.editObject.address.split(",", 3);
                // console.log(dizhi)
                this.address = [
                  TextToCode[dizhi[0]].code,
                  TextToCode[dizhi[0]][dizhi[1]].code,
                  TextToCode[dizhi[0]][dizhi[1]][dizhi[2]].code
                ];
                this.formData.address = this.address
              }
          this.rightTableData = [{
            sparePartCode: this.editObject.sparePartCode,
            sparePartIOCode: this.editObject.sparePartIOCode,
            num: this.editObject.num,
            price: this.editObject.price,
            total: this.editObject.total }]
        }
      },
      rightTableData: {
        deep: true,
        handler(val) {
          val.forEach(item => {
            if (
              item.num &&
              item.price
            ) {
              item.total = (
                parseFloat(item.num) *
                parseFloat(item.price)
              ).toFixed(2);
            } else {
              item.total;
            }
          });
        }
      }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      // 选择省市区地址
      handleChange(value) {
        // this.formData.address = value;
        let name = "";
        this.address.map(item => {
          name += CodeToText[item]+',';
        });
        this.formData.address = name;
      },
      save(formData) {
        this.formData.total = Number(this.formData.total)
        this.$refs[formData].validate(valid => {
          if (valid) {
            if (this.nowChanceStau === "edit") {
              this.formData.input = true
                let params = { ...this.formData };
                sparePartsSupplierApi.edit(params).then(res => {
                  if (res.code === 1) {
                    this.$message.success("修改成功！");
                    this.close()
                  } else {
                    this.$message.error(res.msg);
                  }
                });
            } else if (this.nowChanceStau === "add") {
              this.formData.input = true
                let params = { ...this.formData };
                sparePartsSupplierApi.add(params).then(res => {
                  if (res.code === 1) {
                    this.$message.success(res.msg);
                    this.close()
                  } else {
                    this.$message.error(res.msg);
                  }
                });
            }
          } else {
            return false;
          }
        });
      },
      close() {
        this.$emit("closeDialog");
        this.address = []
      },
      cancel() {
        this.$emit("cancelDialog");
        this.address = []
      }
    }
  };
  </script>
  
  <style lang="scss" scoped>
  ::v-deep .el-table th{
    color:#000;
    background-color: rgba(120, 182, 193, 0.4) !important;
  }
  ::v-deep .el-table .el-table__row--striped{
    color:#000;
    background-color: rgba(186, 186, 186, 0.4) !important;
  }
  ::v-deep.el-table td, .el-table th.is-leaf,.el-table--border, .el-table--group, .el-table th.is-leaf{
    border-color: #D3D3D3 !important;
  }
  ::v-deep .el-table th.is-leaf{
    border-color: #D3D3D3 !important;
  }
  ::v-deep .el-table__empty-text{
    color: #000;
  }
  ::v-deep .el-table{
    color: #000;
  }
  .addInfo{
    width: 100%;
    margin: 10px;
    background-color: #006E91;
    color: #fff;
    font-size: 18px;
  
  }
  .el-form{
    margin-top: 10px;
  }
  </style>
  